/**
 * 可编辑Tabel
 * @date 2020/05/09
 */

import React from 'react';
import { Table, Input, Switch, Form, Select } from 'antd';

const originData: any = [];

for (let i = 0; i < 6; i++) {
  originData.push({
    key: i.toString(),
    name: '',
    relation: '',
    jobName: '',
    viewObject: false,
    deptName: '',
    remark: '',
  });
}

const EditableCell = ({
  dataIndex,
  title,
  inputNode,
  record,
  index,
  children,
  ...restProps
}: any) => {
  const valuePropName =
    dataIndex === 'viewObject' ? { valuePropName: 'checked' } : {};
  return (
    <td {...restProps}>
      <Form.Item
        {...valuePropName}
        name={['tableList', record.key, dataIndex]}
        style={{
          margin: 0,
        }}
        //   rules={[
        //     {
        //       required: true,
        //       message: `Please Input ${title}!`,
        //     },
        //   ]}
      >
        {inputNode}
      </Form.Item>
    </td>
  );
};

const EditableTable = (props: any) => {
  const { form } = props;

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      width: '10%',
      align: 'center',
      editable: true,
    },
    {
      title: '与本人关系',
      dataIndex: 'relation',
      width: '6%',
      align: 'center',
      editable: true,
    },
    {
      title: '工作单位（全称）',
      dataIndex: 'jobName',
      width: '20%',
      align: 'center',
      editable: true,
    },
    {
      title: (
        <span>
          是否属于
          <br />
          <span>证监会监管对象</span>
        </span>
      ),
      dataIndex: 'viewObject',
      width: '10%',
      align: 'center',
      editable: true,
    },
    {
      title: '部门及职务',
      dataIndex: 'deptName',
      width: '15%',
      align: 'center',
      editable: true,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      width: '15%',
      align: 'center',
      editable: true,
    },
  ];

  const switchComponentType = (dataIndex: string) => {
    switch (dataIndex) {
      case 'viewObject':
        return <Switch checkedChildren="是" unCheckedChildren="否" />;

      case 'relation':
        return (
          <Select placeholder="请选择与本人的关系">
            <Select.Option key="1" value="1">
              选项一
            </Select.Option>
            <Select.Option key="2" value="2">
              选项二
            </Select.Option>
            <Select.Option key="3" value="3">
              选项三
            </Select.Option>
            <Select.Option key="4" value="4">
              选项四
            </Select.Option>
          </Select>
        );

      case 'name':
        return <Input placeholder="请输入姓名" />;

      case 'jobName':
        return <Input placeholder="请输入工作单位" />;

      case 'deptName':
        return <Input placeholder="请输入部门及职务" />;

      case 'remark':
        return <Input placeholder="备注" />;
    }
  };

  const mergedColumns: any = columns.map(col => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record: any) => ({
        record,
        inputNode: switchComponentType(col.dataIndex),
        dataIndex: col.dataIndex,
        title: col.title,
      }),
    };
  });
  return (
    <Form form={form} component={false}>
      <Table
        components={{
          body: {
            cell: EditableCell,
          },
        }}
        bordered
        size="small"
        dataSource={originData}
        columns={mergedColumns}
        pagination={false}
      />
    </Form>
  );
};

export default EditableTable;
